<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>点击请求</h1>
    <form  id="form">
        <input type="text" name="name">
        <input type="text" age="age">
        <input type="text"  sex="sex">
        <button id="btn">按钮</button>
    </form>
    <script>
        const oName = document.querySelector('#form input[name = name]')
        const oAge = document.querySelector('#form input[age = age]')
        const oSex = document.querySelector('#form input[sex = sex]')
        const btn = document.querySelector('#btn')
        const oForm = document.querySelector('#form')

        oForm.onsubmit = function(){
            const nameValue = oName.value;
            const ageValue = oAge.value;
            const sexValue = oSex.value;
            const xhr  =  new XMLHttpRequest()
            xhr.open('POST','/1?user')
            // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8")
            // xhr.send(`name = ${nameValue}&age=${ageValue}&sex=${sexValue}`)
            //用底层post中send 需要考虑到很多的类型格式，所以需要设置请求头内部的格式
            xhr.setRequestHeader('content-Type','application/JSON')
            xhr.send(JSON.stringify({
                name : nameValue,
                age: ageValue,
                sex:sexValue
            }))
            xhr.onreadystatechange = function(){
                if(xhr.readyState ===4){
                    console.log(xhr.responseText);
                }
            }
        }
        



    </script>
</body>
</html>